<template>
	<view class="warp">
		<view class="bg_top">
			<view class="icon" @click="cancenfn">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="context">
				<view class="text1">
					你是...
				</view>
				<view class="text2">
					太阳双鱼、月亮金牛、上升狮子
				</view>
			</view>
		</view>
		<view class="tag_box">
			<view class="tag_1 tag">
				让渡自己
			</view>
			<view class="tag_2 tag">
				奥斯卡影帝
			</view>
			<view class="tag_3 tag">
				感动了自己
			</view>
			<view class="tag_4 tag">
				虚幻主义
			</view>
			<view class="tag_5 tag">
				患得患失
			</view>
		</view>
		<view class="bg_bottom">
			<view class="bg_b_box">
				<view class="bg_title">
					我的整体的财富情况如何？
				</view>
				<view class="cont_text">
					<view class="list_item">
						<view class="icon">
							<uni-icons type="checkbox" size="20"></uni-icons>
				
						</view>
						<view class="text">
							允许读道AI智能体为我提供解读
						</view>
					</view>
					<view class="list_item">
						<view class="icon">
							<uni-icons type="checkbox" size="20"></uni-icons>
									
						</view>
						<view class="text">
							允许部分用户访问我的星座详情
						</view>
					</view>
					 
				</view>
				 <view class="bottom_box" @click="toconfn">
				 	<view class="button">
				 		开始测试，探索真正的自己
				 	</view>
				 </view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			toconfn(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			cancenfn(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
		background-color: #fff;
	}
	.warp{
		
		.bg_top{
			height: 250rpx;
			padding: 0 30rpx;
			background: linear-gradient(to bottom , #b1f9f8 30%, #FFFFFF);
			position: relative;
			.icon{
				position: absolute;
				top: 80rpx;
				right: 30rpx;
			}
			.context{
				position: absolute;
				bottom: 10rpx;
				.text1{
					font-size: 26rpx;
					font-weight: 550;
					letter-spacing: 4rpx;
				}
				.text2{
					margin-top: 16rpx;
					font-size: 36rpx;
					font-weight: 550;
					letter-spacing: 4rpx;
				}
			}
		}
		.tag_box{
			height: 320rpx;
			padding: 30rpx 30rpx;
			position: relative;
			.tag{
				width: 260rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 38rpx;
				letter-spacing: 8rpx;
				 position: absolute;
			}
			.tag_1{
				
				left: 40rpx;
				top: 10rpx;
				background-color: #ffd6b7;
			}
			.tag_2{
				right: 40rpx;
				top: 30rpx;
				background-color: #e1fd70;
			}
			.tag_3{
				right: 300rpx;
				top: 100rpx;
				background-color: #9ff5fc;
			}
			.tag_4{
				left: 30rpx;
				top: 180rpx;
				background-color: #e8dcff;
			}
			.tag_5{
				right: 30rpx;
				top: 170rpx;
				background-color: #e8dcff;
			}
		}
		.bg_bottom{
			padding: 0 60rpx;
			.bg_b_box{
				height: 450rpx;
				background-color: #a8f6ff;
				border-radius: 20rpx;
				 padding: 20rpx;
				.bg_title{
					width: 100%;
					padding:60rpx 0;
					text-align: center;
					border-radius: 20rpx;
					background-color: #fff;
					font-size: 32rpx;
					font-weight: 550;
				}
				.cont_text{
					margin-top: 20rpx;
					.list_item{
						display: flex;
						
					}
				}
				.bottom_box{
					margin-top: 50rpx;
					text-align: center;
					.button{
						display: inline-block;
						width: 500rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 40rpx;
						background-color: #000000;
						color: #fff;
						letter-spacing: 4rpx;
						font-weight: 550;
					}
				}
			}
			
		}
	}
</style>
